<!--
Copyright 2017 The Kubernetes Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<kd-content-card class="kd-log-content-card">
  <kd-title class="kd-logs-title">
    [[Logs from|Title prefix for logs card.]]
    <md-select class="kd-logs-toolbar-select"
               aria-label="container"
               ng-model="ctrl.container"
               md-on-close="ctrl.loadNewest()"
               required>
      <md-optgroup label="[[Containers|Label atop a list of Containers]]"
                   class="kd-namespace-select-namespace-list">
        <md-option ng-repeat="item in ctrl.logSources.containerNames"
                   ng-value="item">
          <span class="kd-logs-toolbar-text">{{::item}}</span>
        </md-option>
      </md-optgroup>
      <md-optgroup label="[[Init Containers|Label atop a list of Init Containers]]"
                   class="kd-namespace-select-namespace-list">
        <md-option ng-repeat="item in ctrl.logSources.initContainerNames"
                   ng-value="item">
          <span class="kd-logs-toolbar-text">{{::item}}</span>
        </md-option>
      </md-optgroup>
    </md-select>
    [[in|Title part for logs card.]]
    <md-select class="kd-logs-toolbar-select"
               aria-label="resource"
               ng-model="ctrl.pod"
               md-on-close="ctrl.loadNewest()"
               required>
      <md-option ng-repeat="item in ctrl.logSources.podNames"
                 ng-value="item">
        <span class="kd-logs-toolbar-text">{{::item}}</span>
      </md-option>
    </md-select>
    <div class="kd-logs-style-buttons">
      <md-button class="kd-logs-toolbar-button"
                 ng-click="ctrl.onTextColorChange()">
        <md-icon ng-class="{'kd-logs-color-icon-invert': ctrl.logsService.getInverted(),
                            'kd-logs-color-icon': !ctrl.logsService.getInverted()}">
          format_color_text
        </md-icon>
        <md-tooltip md-delay="500"
                    md-autohide>
          [[Invert colors|Tooltip for button that toggles between light & dark background in log viewer.]]
        </md-tooltip>
      </md-button>
      <md-button class="kd-logs-toolbar-button"
                 ng-click="ctrl.onFontSizeChange()">
        <md-icon ng-class="{'kd-logs-size-icon-compact': ctrl.logsService.getCompact(),
                            'kd-logs-size-icon': !ctrl.logsService.getCompact()}">
          text_fields
        </md-icon>
        <md-tooltip md-delay="500"
                    md-autohide>
          [[Toggle font size|Tooltip for button that toggles between a larger and smaller font option in the log viewer.]]
        </md-tooltip>
      </md-button>
      <md-button class="kd-logs-toolbar-button"
                 ng-click="ctrl.onShowTimestamp()">
        <md-icon class="kd-logs-icon">{{ctrl.logsService.getShowTimestamp() ? 'timer' : 'timer_off'}}</md-icon>
      </md-button>
      <md-button class="kd-logs-toolbar-button"
                 ng-click="ctrl.toggleLogFollow()">
        <md-icon class="kd-logs-icon">
          refresh
          <svg class="kd-cross-style"
               ng-if="!ctrl.logsService.getFollowing()"
               width="32px"
               height="32px"
               viewBox="0 0 32 32">
            <line class="kd-cross-line-white" x1="9" x2="27" y1="9" y2="27"/>
            <line class="kd-cross-line-black" x1="9" x2="27" y1="10" y2="28"/>
          </svg>
        </md-icon>
        <md-tooltip md-delay="500"
                    md-autohide>
          [[Toggle auto-refresh (every {{ctrl.refreshInterval / 1000}} seconds)|]]
        </md-tooltip>
      </md-button>
      <md-button class="kd-logs-toolbar-button"
                 ng-click="ctrl.onPreviousChange()">
        <md-icon class="kd-logs-icon">{{ctrl.logsService.getPrevious() ? 'exposure_neg_1' : 'exposure_zero'}}</md-icon>
        <md-tooltip ng-if="ctrl.logsService.getPrevious()"
                    md-delay="500"
                    md-autohide>
          [[Show current logs|Tooltip for button that switches to showing the current logs.]]
        </md-tooltip>
        <md-tooltip ng-if="!ctrl.logsService.getPrevious()"
                    md-delay="500"
                    md-autohide>
          [[Show previous logs|Tooltip for button that switches to showing the previous logs.]]
        </md-tooltip>
      </md-button>
      <md-button class="kd-logs-toolbar-button"
                 ng-click="ctrl.downloadLog()">
        <md-icon class="kd-logs-icon">file_download</md-icon>
        <md-tooltip md-delay="500"
                    md-autohide>
          [[Download logs|Tooltip for button that downloads the logs as a file.]]
        </md-tooltip>
      </md-button>
    </div>
  </kd-title>
  <kd-content>
    <md-virtual-repeat-container class="kd-log-view"
                                 ng-class="{'kd-logs-text-color-invert': ctrl.logsService.getInverted(),
                                            'kd-logs-text-color': !ctrl.logsService.getInverted()}"
                                 md-top-index="ctrl.topIndex">
      <div md-virtual-repeat="item in ctrl.logsSet"
           ng-class="{'kd-logs-element-compact': ctrl.logsService.getCompact(),
                      'kd-logs-element': !ctrl.logsService.getCompact()}">
        <span ng-bind-html="item"
              class="kd-log-line">&nbsp;</span>
      </div>
    </md-virtual-repeat-container>
  </kd-content>
  <kd-footer>
    <div layout="row">
      <span class="kd-logs-info"
            ng-show="ctrl.logsSet.length > 1">
        [[Logs from|Title prefix for logs card.]]
        {{ctrl.podLogs.info.fromDate | date : "short"}}
        [[to|Footer part for logs card.]]
        {{ctrl.podLogs.info.toDate | date : "short" }}
        UTC
      </span>
      <span flex></span>
      <div class="kd-list-pagination-buttons">
        <md-button class="md-icon-button md-button md-ink-ripple"
                   ng-click="ctrl.loadOldest()">
          <md-icon>first_page</md-icon>
        </md-button>
        <md-button class="md-icon-button md-button md-ink-ripple"
                   ng-click="ctrl.loadOlder()">
          <md-icon>chevron_left</md-icon>
        </md-button>
        <md-button class="md-icon-button md-button md-ink-ripple"
                   ng-click="ctrl.loadNewer()">
          <md-icon>chevron_right</md-icon>
        </md-button>
        <md-button class="md-icon-button md-button md-ink-ripple"
                   ng-click="ctrl.loadNewest()">
          <md-icon>last_page</md-icon>
        </md-button>
      </div>
    </div>
  </kd-footer>
</kd-content-card>
